<template>
  <div class="ding">
    <div class="hang">
      <div></div>
      <div class="elm">饿了么</div>
      <div class="yuan">
        <span class="iconfont icon-gengduo-01"></span>
        <span class="s1">|</span>
        <span class="iconfont icon-guangpan"></span>
      </div>
    </div>
    <div class="hang2">
        <span v-for="(item,index) in shuzu" :key="index" :class="{dao:true,actives:zxcindex==index}" @click="zxcindex=index">{{item.text}}</span>
    </div>
    <div class="hang3" v-for="(i,t) in shuju" :key="t">
        <div class="h1">
           <div>
            <span class="d1"><img :src="i.pic" alt=""></span>
            <span class="hd">{{i.text}}</span>
            <span class="iconfont icon-angle-right"></span>
           </div>
            <span class="hd1">已送达</span>
        </div>
        <div class="h2">
          <span>{{i.huo1}}</span>
          <span>{{i.huo2}}</span>
          <span>{{i.huo3}}</span>
        </div>
        <div class="h3">
          <div>
            <img :src="i.img1" alt="">
            <img :src="i.img2" alt="">
            <img :src="i.img3" alt="">
          </div>
          <div>
            <div class="jia">¥{{i.jia}}</div>
            <div class="shu">共{{i.shu}}件</div>
          </div>
        </div>
        <div class="h4">再来一单</div>
    </div>
  </div>
</template>

<script>
import tu1 from '../assets/饿了么_首页_06.gif'
import tu2 from '../assets/饿了么_订单_03.gif'
import tu3 from '../assets/饿了么_订单_05.gif'
import tu4 from '../assets/03.gif'
import tu5 from '../assets/4.gif'
import tu6 from '../assets/05.gif'
import tu7 from '../assets/12.gif'
import tu8 from '../assets/13.gif'

export default {
  data() {
    return {
        zxcindex:0,
      shuzu: [
        { ip: 1, text: "全部" },
        { ip: 2, text: "待消费" },
        { ip: 3, text: "待评价" },
        { ip: 4, text: "退款" },
      ],
      shuju:[
        {id:1,pic:tu1,text:'纯手工饺子(凤城九路店)',huo1:'10减3',huo2:'25减10',huo3:'50减21',img1:tu2,img2:tu3,img3:'',jia:17.8,shu:2},
        {id:2,pic:tu4,text:'唐久便利(海荣名城店)',huo1:'',huo2:'',huo3:'',img1:tu4,img2:tu5,img3:tu6,jia:18.3,shu:3},
        {id:3,pic:tu7,text:'美益水果(北美店)',huo1:'',huo2:'',huo3:'',img1:tu7,img2:tu8,img3:'',jia:28.89,shu:2}
      ]
    };
  },
};
</script>

<style scoped>
.ding {
  padding: 20px;
  background-color: #f5f5f5;
}
.hang {
  display: flex;
  justify-content: space-between;
}
.hang div:nth-child(1) {
  width: 90px;
  height: 40px;
}
.yuan {
  width: 90px;
  height: 30px;
  border-radius: 20px;
  background-color: #fbfbfb;
  text-align: center;
  line-height: 30px;
  padding: 5px;
}
.iconfont {
  font-size: 26px;
}
.s1 {
  font-size: 26px;
}
.icon-gengduo-01 {
  margin-right: 5px;
}
.icon-guangpan {
  margin-left: 5px;
}
.elm {
  font-size: 24px;
  font-weight: bold;
}
.hang2{
    margin-top: 30px;
}
.dao{
    font-size: 20px;
    margin-right: 20px;
   
}
.actives{
    font-weight: bold;
    font-size: 22px;
    border-bottom: 5px solid #51b3f6;
    height: 40px;
}
.hang3{
    /* width: 100%; */
    height: 220px;
    background-color: #fff;
    margin-top: 15px;
    border-radius: 10px;
    padding: 10px;
}
.d1{
    display: inline-block;
    width: 50px;
    height: 50px;
   
}
.d1 img{
    width: 100%;
    vertical-align: middle;
}
.hd{
  font-size: 18px;
  font-weight: bold;
  margin-left: 5px;
}
.hd1{
  margin-top: 10px;
}
.h1{
  display: flex;
  justify-content: space-between;
}
.h2 span{
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid pink;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 10px;
  color: red;
}
.h3{
  display: flex;
  justify-content: space-between;
}
.h3 img{
  width: 80px;
  margin-right: 5px;
  margin-top: 5px;
}
.h3 .jia{
  font-size: 20px;
  font-weight: bold;
}
.h4{
  width: 90px;
  height: 30px;
  border-radius: 20px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #54b6f6;
  color: #54b6f6;
  margin-left: 250px;
}
</style>